<!DOCTYPE html>
<html>
<!-- Mirrored from www.gzsxt.cn/theme/hplus/table_basic.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:01 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>办公系统 - 基础表格</title>
    <meta name="keywords" content="办公系统">
    <meta name="description" content="办公系统">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/select/bootstrap-select.min.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper2 wrapper-content2 animated fadeInRight">
    <div class="row">
        <div class="col-sm-5">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>添加部门</h5>
                </div>
                <div class="ibox-content">
                    <form id="dataDept" class="form-horizontal">
                        <input type="hidden" name="deptno" class="form-control">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">部门名称：</label>

                            <div class="col-sm-8">
                                <input type="text" name="dname" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">区域：</label>

                            <div class="col-sm-8">
                                <input type="text" name="local" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-8">
                                <button class="btn btn-sm btn-white btnSave" type="button"><i class="fa fa-save"></i> 保存
                                </button>
                                <button class="btn btn-sm btn-white btnReset" type="button"><i class="fa fa-undo"></i> 重置
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-sm-7">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>部门列表 <small>点击修改信息将显示在左边表单</small></h5>
                </div>
                <div class="ibox-content">
                    <div class="hr-line-dashed2"></div>
                    <div class="row">
                        <div class="table-responsive">
                            <table class="table table-striped list-table">
                                <thead>
                                <tr>
                                    <th>选择</th>
                                    <th>部门编号</th>
                                    <th>部门名称</th>
                                    <th>区域</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/select/bootstrap-select.min.js"></script>
<script src="/js/plugins/sweetalert/sweetalert.min.js"></script>

<script>
    $(document).ready(function () {
        loadDept();
        function loadDept() {
            $("tbody").html('');
            $.getJSON("/dept/list", function (response) {
                $(response).each(function () {
                    var deptlist = ` <tr>
                                    <td><input type="checkbox"></td>
                                    <td>`+this.deptno+`</td>
                                    <td>`+this.dname+`</td>
                                    <td>`+this.local+`</td>
                                    <td>
                                        <a href="javascript:void(0)" class="btnUpdate"><i
                                                class="glyphicon glyphicon-edit  text-navy"></i></a>
                                        <a href="javascript:void(0)" class="btnDel"><i
                                                class="glyphicon glyphicon-remove  text-navy"></i></a>
                                    </td>
                                </tr>`;
                    $("tbody").append(deptlist);
                });
            });
        }

        $("body").on("click",".btnDel",function () {
            var id = $(this).parents("tr").children().eq(1).text();
            var $this = $(this);
            swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false,
                cancelButtonText: "取消",
            }, function () {//此函数是点击删除执行的函数
                //这里写ajax代码
                // 以下是成功的提示框，请在ajax回调函数中执行
                remove(id,$this);
            });
        });

        $(".btnReset").click(function () {
            reset();
        });

        //删除部门
        function remove(id,$this) {
            $.post("/dept/remove",{"no":id},function (response) {
                if (response == "success") {
                    swal("删除成功", "为您刷新数据","success");
                    $this.parents("tr").remove();
                }else {
                    swal("删除失败", "请稍后重试...","error");
                }
            },"text")
        }

        function reset() {
            $("#dataDept")[0].reset();
            methodName="save";
            $("input[deptno]").val("0");
        }

        var methodName = "save";
        $(".btnSave").click(function () {
            let deptData = $("#dataDept").serialize();
            var message = "添加";
            $.post("/dept/"+methodName,deptData,function (response) {
                if (methodName=="update"){
                    message="修改"
                }
                if (response == "success") {
                    swal(message +"成功", "为您刷新数据","success");
                    loadDept();
                    reset();
                }else {
                    swal(message+"失败", "请稍后重试...","error");
                }
            },"text");
        });
        
        $("body").on("click",".btnUpdate",function () {
            var id = $(this).parents("tr").children().eq(1).text();
            $.getJSON("/dept/get",{"no":id},function (response) {
                $("input[name=deptno]").val(response.deptno);
                $("input[name=dname]").val(response.dname);
                $("input[name=local]").val(response.local);
            });
            methodName="update";
        });
    });
</script>
</body>


</html>
    
